<template>
  <div>
    <div class="picturedes-content">
      <el-form ref="pictureDesList" label-width="98px">
        <el-form-item label="商品图片：">
          <div class="picturedl-pesent">宝贝主图大小不能超过3MB；700*700 以上图片上传后宝贝详情页自动提供放大镜功能。</div>
          <div class="picture-up">
            <pictureUpload
              tip="添加主图图片"
              :size="3072"
              :position="1"
              :picturereturn="pictureDesList"
              @onSuccess="onSuccess"
              @deletePicUrl="deletePicUrl"
            />
            <pictureUpload
              tip="添加白底图片"
              :size="3072"
              :position="2"
              :picturereturn="pictureDesList"
              @onSuccess="onSuccess"
              @deletePicUrl="deletePicUrl"
            />
            <pictureUpload
              :size="3072"
              :position="3"
              :picturereturn="pictureDesList"
              @onSuccess="onSuccess"
              @deletePicUrl="deletePicUrl"
            />
            <pictureUpload
              :size="3072"
              :position="4"
              :picturereturn="pictureDesList"
              @onSuccess="onSuccess"
              @deletePicUrl="deletePicUrl"
            />
            <pictureUpload
              :size="3072"
              :position="5"
              :picturereturn="pictureDesList"
              @onSuccess="onSuccess"
              @deletePicUrl="deletePicUrl"
            />
          </div>
        </el-form-item>
        <el-form-item label="商品详情描述：">
          <div style="max-width:1000px;min-width:500px;padding:3px 1px;">
            <tinymce v-if="showIntroduce" v-model="introduce" :height="426" />
            <tinymce v-else v-model="introduce" :height="426" />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce';
import pictureUpload from '../components/pictureUpload';
export default {
  components: {
    Tinymce,
    pictureUpload
  },
  props: {
    getdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pictureDesList: [
        { position: 1 },
        { position: 2 },
        { position: 3 },
        { position: 4 },
        { position: 5 }
      ],
      pictureEndToSend: [],
      introduce: '',
      limitCount: 1,
      flag_pic: -1,
      flag_tiny: -1,
      showIntroduce: false
    };
  },
  watch: {
    introduce(newValue, oldValue) {
      if (this.introduce) {
        this.flag_tiny = 1;
      } else {
        this.flag_tiny = -1;
      }
      this.sendData();
    },
    getdata() {
      this.introduce = this.getdata.pictureDes.introduce;
      this.showIntroduce = true;
      this.pictureDesList = [{}, {}, {}, {}, {}];
      for (let i = 0; i < 5; i++) {
        this.pictureDesList[i].position = i + 1;
        this.pictureDesList[i].url = this.getdata.pictureDes.pictureDesList[i];
      }
      this.flag_pic = 1;
      this.flag_tiny = 1;
      this.pictureEndToSend = this.getdata.pictureDes.pictureDesList;
      this.sendData();
    }
  },
  methods: {
    onSuccess(value) {
      // 第一步骤
      for (let i = 0; i < 5; i++) {
        if (this.pictureDesList[i].position === value.position) {
          this.pictureDesList[i].url = value.url;
          this.checkouted();
          this.sendData();
          return;
        }
      }
      this.pictureDesList.push(value);

      this.checkouted();
      this.sendData();
    },
    checkouted() {
      // 第二步骤
      const positionArr = ['', '', '', '', ''];
      for (let i = 0; i < this.pictureDesList.length; i++) {
        switch (this.pictureDesList[i].position) {
          case 1:
            positionArr[0] = this.pictureDesList[i].url
              ? this.pictureDesList[i].url
              : '';
            break;
          case 2:
            positionArr[1] = this.pictureDesList[i].url
              ? this.pictureDesList[i].url
              : '';
            break;
          case 3:
            positionArr[2] = this.pictureDesList[i].url
              ? this.pictureDesList[i].url
              : '';
            break;
          case 4:
            positionArr[3] = this.pictureDesList[i].url
              ? this.pictureDesList[i].url
              : '';
            break;
          case 5:
            positionArr[4] = this.pictureDesList[i].url
              ? this.pictureDesList[i].url
              : '';
            break;
        }
      }
      if (positionArr[0] !== '') {
        this.flag_pic = 1;
      }
      this.pictureEndToSend = positionArr;
    },
    // 接受删除图片链接
    deletePicUrl(value) {
      if (value.code === '-1') {
        this.flag_pic = -1;
      }
      // 获取删除的是哪一张图片
      this.pictureDesList[value.position - 1].url = '';
      this.checkouted();
      this.sendData();
    },
    sendData() {
      if (this.flag_tiny === 1 && this.flag_pic === 1) {
        this.$emit('getPictureDes', {
          pictureDesList: this.pictureEndToSend,
          introduce: this.introduce
        });
        this.flag_tiny === -1;
        this.flag_pic === -1;
      } else {
        this.$emit('getPictureDes', -1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.picturedes-content {
  padding: 40px 0 15px 18%;
  width: 100%;
  .el-form {
    width: 100%;
    .el-form-item {
      width: 100%;
      .picturedl-pesent {
        width: 680px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(131, 138, 157, 1);
      }
      .picture-up {
        width: 900px;
        overflow: hidden;
      }
      /deep/.el-form-item__label {
        padding: 0;
      }
    }
  }
}
/deep/.hide .el-upload--picture-card {
  display: none;
}
</style>
